<!--
 * @Description: 富文本
 * @Author: ZhangHan
 * @Date: 2025-08-08 14:29:37
 * @LastEditTime: 2025-09-16 08:53:15
 * @LastEditors: ZhangHan
-->

<template>
  <view>
    <MyEditor
      ref="editRef"
      :defaultContent="formState.content"
      @editor-change="handleEditorChange"
      :id="`test1`"
    />
    <view class="btn" @click="handleGenerate">生成文本内容</view>
    <Text />
  </view>
</template>

<script setup lang="ts">
import { ref, reactive , defineAsyncComponent, onMounted } from "vue";
import MyEditor from "@/components/MyEditor/MyEditor.vue";
import Text from "@/components/Text.vue";
import { useGo } from "@/hooks/usePage";
import { ROUTER_PATH } from "@/concacts/routerPath";
import { PreviewData } from "@/utils/previewData";

const pData = PreviewData.getInstance();

const go = useGo();
const editRef = ref();
const formState = reactive<any>({});

onMounted(()=>{
  console.log("🚀 ~ onMounted ~ editRef.value:", editRef.value);
  
})

//富文本编辑器内容变化
const handleEditorChange = (data: any) => {
  console.log("🚀 ~ handleEditorChange ~ data:", data);
  formState.content = data?.html;
  formState.innerText = data?.text;
};

//获取文本内容并跳转
const handleGenerate = () => {
  console.log("🚀 ~ handleGenerate ~ formState.content:", formState.content);
  //跳转到文本内容页面
  if (formState.content && formState.content !== "<p><br></p>") {
    const content = formState.content.replace(
      /<img[^>]*>/gi,
      function (imgTag: any) {
        return imgTag
          .replace(/&nbsp;/g, "\xa0") // 替换 &nbsp;
          .replace(/&amp;/g, "&"); // 替换 &amp;
      }
    );
    pData.setData(content);
    go(ROUTER_PATH.CONTENTINFO);
  } else {
    uni.showToast({ title: "请填写完整", icon: "error" });
  }
};
</script>

<style scoped lang="scss">
.btn {
  width: 80%;
  background: lightskyblue;
  font-size: 27rpx;
  color: white;
  border-radius: 12rpx;
  margin: 32rpx auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}
</style>
